<template>
  <div class="gva-table-box">
    <div class="gva-btn-list search-form" style="padding-top: 80px;">
      <el-form ref="formRef" :model="OrderInfo" style="width: 100%;">
        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="订单号" prop="global_order_no">
              <el-input clearable v-model="global_order_no" placeholder="订单号" />
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item>
              <el-button type="primary" icon="Search" class="action" style="margin-left: 20px;"
                @click="getsearch">获取订单信息</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title_gap">基本信息:</div>
        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="运输方式" prop="transport_type">
              <el-select clearable v-model="OrderInfo.transport_type"  placeholder="运输方式">
                <el-option value="PK0096" label="亚琛仓-DHL小包(PK0096)" />
                <el-option value="PK0100" label="亚琛仓-DHL-德国本土(PK0100)" />
                <el-option value="PK0101" label="亚琛仓-DHL-欧盟(PK0101)" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="参考单号" prop="OrderNo">
              <el-input clearable v-model="OrderInfo.OrderNo" placeholder="订单号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="国家" prop="country">
              <el-input clearable v-model="OrderInfo.CountryName" placeholder="国家" />
            </el-form-item>
          </el-col>
        </el-row>
 
        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="质量等级" prop="order_merchandise_grade">
              <el-select clearable v-model="OrderInfo.order_merchandise_grade"  placeholder="质量等级">
                <el-option value="Y" label="正品" />
                <el-option value="N" label="次品" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="备注" prop="remark">
              <el-input clearable type="textarea" v-model="OrderInfo.remark" placeholder="备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title_gap">收件人信息:</div>

        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="收件人姓名" prop="u_name">
              <el-input clearable v-model="OrderInfo.Contact" placeholder="收件人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收件人公司" prop="Company">
              <el-input clearable v-model="OrderInfo.Company" placeholder="收件人公司" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="省" prop="province">
              <el-input clearable v-model="OrderInfo.Province" placeholder="省" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="市" prop="city">
              <el-input clearable v-model="OrderInfo.City" placeholder="市" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="县/区" prop="district">
              <el-input clearable v-model="OrderInfo.Area" placeholder="区" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="地址" prop="address">
              <el-input clearable v-model="OrderInfo.Address" placeholder="地址" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="邮政编码" prop="ZipCode">
              <el-input clearable v-model="OrderInfo.ZipCode" placeholder="邮政编码" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="门牌号" prop="homeno">
              <el-input clearable v-model="OrderInfo.Address2" placeholder="门牌号" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="电话" prop="mobilephone">
              <el-input clearable v-model="OrderInfo.MobilePhone" placeholder="电话" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="flex">
          <el-col :span="6">
            <el-form-item label="邮箱" prop="email">
              <el-input clearable v-model="OrderInfo.Email" placeholder="邮箱" />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title_gap">货物信息:</div>
        <el-row :gutter="20" class="flex" v-for="(detail,index) in delivery_detail"
        :key="index">
          <el-col :span="8">
            <el-form-item label="SKU" prop="im_code">
              <el-input clearable v-model="detail.im_code" placeholder="SKU" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="数量" prop="quantity">
              <el-input clearable v-model="detail.quantity" placeholder="数量" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div>
      <el-button type="primary"  class="action" style="margin-left: 20px;"
      @click="setout">创建出库单</el-button>
    </div>
  </div>

</template>

<script setup>
import { ref, reactive,watch } from 'vue'
import { getOrderdetail,setoutapi } from '@/api/orderlimit'
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios';
import {showLoading,closeLoading } from '@/utils/common'

defineOptions({
  name: 'sumoolorderd'
})

const route = useRoute()
const global_order_no = ref('')
const router = useRouter()
const loading = ref(false)

const page = ref(1)
const OrderInfo = ref({

})
const delivery_detail = ref([])
const details = ref([])
const getOrderData = async () => {
  let req = {
    global_order_no:global_order_no.value
  }
  loading.value = true
  getOrderdetail(req).then((res) => {
    loading.value = false

    if (res.errcode == 0) {

      OrderInfo.value = res.orderinfo
      details.value = res.details
      delivery_detail.value = [];
      details.value.forEach(element => {
        let smsku = element.OrderDetailColumn4;
        let substr = 'renzo-barefoot-shoes-white-'
        if (smsku.includes(substr)) {
          let skuarr = smsku.split(substr);
          let size = skuarr[1]
          let detailitem = {
          im_code:'DE01-0'+size,
          quantity:element.Num,
        }
        delivery_detail.value.push(detailitem)
        }

      });
      if(res.orderinfo.Country=='DE'){
        OrderInfo.value.transport_type='PK0100'
      }else{
        OrderInfo.value.transport_type='PK0101'

      }
      OrderInfo.value.order_merchandise_grade = 'Y'
    }
  });
}

const getsearch = async () => {
  getOrderData(OrderInfo)
}
const setout = ()=>{
  // let delivery_detail = [];
  // details.value.forEach(element => {
  //   let smsku = element.OrderDetailColumn4;
  //   let substr = 'renzo-barefoot-shoes-white-'
  //   if (smsku.includes(substr)) {
  //     let skuarr = smsku.split(substr);
  //     let size = skuarr[1]
  //     let detailitem = {
  //     im_code:'DE01-0'+size,
  //     quantity:element.Num,
  //   }
  //   delivery_detail.push(detailitem)
  //   }

  // });
  let orderobj = {
    review:0,
    order_merchandise_grade:OrderInfo.value.order_merchandise_grade,
    source_platform:OrderInfo.value.RelationType,
    wh_code_origin:34,
    transport_type:OrderInfo.value.transport_type,
    ref_code:OrderInfo.value.OrderNo,
    // ref_code:generateEightDigitRandom(),
    country:OrderInfo.value.Country,
    platform:OrderInfo.value.RelationType,
    u_name:OrderInfo.value.Contact,
    company:OrderInfo.value.Company,
    province:OrderInfo.value.Province,
    city:OrderInfo.value.City,
    district:OrderInfo.value.Area,
    postcode:OrderInfo.value.ZipCode,
    address:OrderInfo.value.Address,
    homeno:OrderInfo.value.Housenumber,
    mobilephone:OrderInfo.value.MobilePhone,
    email:OrderInfo.value.Email,
    remark:OrderInfo.value.remark,
    delivery_detail:delivery_detail.value,
  }
  console.log(orderobj);
  let postjson = {
    orderinfo:JSON.stringify(orderobj)
  }
  showLoading()

  setoutapi(postjson).then((res) => {
    closeLoading()

    if (res.errcode == 0) {
      ElMessage({
        message: "创建成功",
        type: "success",
      });
    }
  });
//   axios.post('http://woms.yclhwc.com/webservice/WOMSService.asmx/ServiceInterfaceUTF8', {
//   appToken: '713d2651-bb65-43fa-96ed-c9a005b0e963',
//   serviceMethod: 'GetWarehouseCode',
//   paramsJson:''
// })
// .then(response => {
//   console.log(response.data)
// })
// .catch(error => {
//   console.log(error)
// })
}
function generateEightDigitRandom() {
    return Math.floor(100000000000 + Math.random() * 900000000000).toString();
}
 
const formRef = ref();
</script>

<style lang="scss" scoped>

:deep(.el-form-item__label) {
  width: 120px !important;

}
.title_gap{
  font-size: 20px;
  margin: 10px 0px;
}
.red{
  color: red;
}
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}

.gva-table-box {
  margin: 20px;
}

:deep(.el-input__inner) {
  font-size: 12px !important;
  color: rgba(0, 0, 0, .85) !important;

}

:deep(.el-select__wrapper) {
  font-size: 12px !important;

  .el-select__selected-item {
    font-size: 12px !important;
  }

}

.logo-img {
  width: 46px;
}
</style>

<style lang="scss">
:deep(.el-form-item) {
  align-content: center;
}
</style>
